<template>
    <PageWrapper title="表单基础示例" contentFullHeight>
        <CollapseContainer title="基础示例">
            <BasicForm autoFocusFirstItem :labelWidth="200" :schemas="schemas" :actionColOptions="{ span: 24 }" :labelCol="{span:8}" @submit="handleSubmit" @reset="handleReset">
                <template #jAreaLinkage="{model, field }">
                    <JAreaLinkage v-model:value="model[field]" :showArea="true" :showAll="false" />
                </template>
                <template #localSearch="{ model, field }">
                    <ApiSelect :api="optionsListApi" showSearch v-model:value="model[field]" optionFilterProp="label" resultField="list" labelField="name" valueField="id"/>
                </template>
                <template #selectA="{ model, field }">
                    <a-select
                            :options="optionsA"
                            mode="multiple"
                            v-model:value="model[field]"
                            @change="valueSelectA = model[field]"
                            allowClear
                    />
                </template>
                <template #selectB="{ model, field }">
                    <a-select
                            :options="optionsB"
                            mode="multiple"
                            v-model:value="model[field]"
                            @change="valueSelectB = model[field]"
                            allowClear
                    />
                </template>
                <template #remoteSearch="{ model, field }">
                    <ApiSelect :api="optionsListApi" showSearch v-model:value="model[field]" :filterOption="false" resultField="list" labelField="name" valueField="id" @search="onSearch"/>
                </template>
            </BasicForm>
        </CollapseContainer>
    </PageWrapper>
</template>
<script lang="ts">
    import {computed, defineComponent, unref, ref} from 'vue';
    import {BasicForm, FormSchema, ApiSelect, JAreaLinkage} from '/@/components/Form/index';
    import {CollapseContainer} from '/@/components/Container';
    import {useMessage} from '/@/hooks/web/useMessage';
    import {PageWrapper} from '/@/components/Page';

    import {optionsListApi} from '/@/api/demo/select';
    import {useDebounceFn} from '@vueuse/core';
    import {treeOptionsListApi} from '/@/api/demo/tree';
    import { Select } from 'ant-design-vue';
    import { cloneDeep } from 'lodash-es';

    const valueSelectA = ref<string[]>([]);
    const valueSelectB = ref<string[]>([]);
    const options = ref<Recordable[]>([]);
    for (let i = 1; i < 10; i++) options.value.push({ label: '选项' + i, value: `${i}` });

    const optionsA = computed(() => {
        return cloneDeep(unref(options)).map((op) => {
            op.disabled = unref(valueSelectB).indexOf(op.value) !== -1;
            return op;
        });
    });
    const optionsB = computed(() => {
        return cloneDeep(unref(options)).map((op) => {
            op.disabled = unref(valueSelectA).indexOf(op.value) !== -1;
            return op;
        });
    });
    const provincesOptions = [
        {
            id: 'guangdong',
            label: '广东省',
            value: '1',
            key: '1',
        },
        {
            id: 'jiangsu',
            label: '江苏省',
            value: '2',
            key: '2',
        },
    ];
    const citiesOptionsData = {
        guangdong: [
            {
                label: '珠海市',
                value: '1',
                key: '1',
            },
            {
                label: '深圳市',
                value: '2',
                key: '2',
            },
            {
                label: '广州市',
                value: '3',
                key: '3',
            },
        ],
        jiangsu: [
            {
                label: '南京市',
                value: '1',
                key: '1',
            },
            {
                label: '无锡市',
                value: '2',
                key: '2',
            },
            {
                label: '苏州市',
                value: '3',
                key: '3',
            },
        ],
    };

    const schemas: FormSchema[] = [
        {
            field: 'divider-basic',
            component: 'Divider',
            label: '基础字段',
        },
        {
            field: 'field1',
            component: 'Input',
            label: '字段1',

            colProps: {
                span: 8,
            },
            // componentProps:{},
            // can func
            componentProps: ({schema, formModel}) => {
                console.log('form:', schema);
                console.log('formModel:', formModel);
                return {
                    placeholder: '自定义placeholder',
                    onChange: (e: any) => {
                        console.log(e);
                    },
                };
            },
            renderComponentContent: () => {
                return {
                    prefix: () => 'pSlot',
                    suffix: () => 'sSlot',
                };
            },
        },
        {
            field: 'field2',
            component: 'Input',
            label: '字段2',
            defaultValue: '111',
            colProps: {
                span: 8,
            },
            componentProps: {
                onChange: (e: any) => {
                    console.log(e);
                },
            },
            suffix: '天',
        },
        {
            field: 'field3',
            component: 'DatePicker',
            label: '字段3',
            colProps: {
                span: 8,
            },
        },
        {
            field: 'field4',
            component: 'Select',
            label: '字段4',
            colProps: {
                span: 8,
            },
            componentProps: {
                options: [
                    {
                        label: '选项1',
                        value: '1',
                        key: '1',
                    },
                    {
                        label: '选项2',
                        value: '2',
                        key: '2',
                    },
                ],
            },
        },
        {
            field: 'field5',
            component: 'CheckboxGroup',
            label: '字段5',
            colProps: {
                span: 8,
            },
            componentProps: {
                options: [
                    {
                        label: '选项1',
                        value: '1',
                    },
                    {
                        label: '选项2',
                        value: '2',
                    },
                ],
            },
        },
        {
            field: 'field7',
            component: 'RadioGroup',
            label: '字段7',
            colProps: {
                span: 8,
            },
            componentProps: {
                options: [
                    {
                        label: '选项1',
                        value: '1',
                    },
                    {
                        label: '选项2',
                        value: '2',
                    },
                ],
            },
        },
        {
            field: 'field8',
            component: 'Checkbox',
            label: '字段8',
            colProps: {
                span: 8,
            },
            renderComponentContent: 'Check',
        },
        {
            field: 'field9',
            component: 'Switch',
            label: '字段9',
            colProps: {
                span: 8,
            },
        },
        {
            field: 'field10',
            component: 'RadioButtonGroup',
            label: '字段10',
            colProps: {
                span: 8,
            },
            componentProps: {
                options: [
                    {
                        label: '选项1',
                        value: '1',
                    },
                    {
                        label: '选项2',
                        value: '2',
                    },
                ],
            },
        },
        {
            field: 'field11',
            component: 'Cascader',
            label: '字段11',
            colProps: {
                span: 8,
            },
            componentProps: {
                options: [
                    {
                        value: 'zhejiang',
                        label: 'Zhejiang',
                        children: [
                            {
                                value: 'hangzhou',
                                label: 'Hangzhou',
                                children: [
                                    {
                                        value: 'xihu',
                                        label: 'West Lake',
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        value: 'jiangsu',
                        label: 'Jiangsu',
                        children: [
                            {
                                value: 'nanjing',
                                label: 'Nanjing',
                                children: [
                                    {
                                        value: 'zhonghuamen',
                                        label: 'Zhong Hua Men',
                                    },
                                ],
                            },
                        ],
                    },
                ],
            },
        },
        {
            field: 'divider-api-select',
            component: 'Divider',
            label: '远程下拉演示',
        },
        {
            field: 'field30',
            component: 'ApiSelect',
            label: '懒加载远程下拉',
            required: true,
            componentProps: {
                // more details see /src/components/Form/src/components/ApiSelect.vue
                api: optionsListApi,
                params: {
                    id: 1,
                },
                resultField: 'list',
                // use name as label
                labelField: 'name',
                // use id as value
                valueField: 'id',
                // not request untill to select
                immediate: false,
                onChange: (e) => {
                    console.log('selected:', e);
                },
                // atfer request callback
                onOptionsChange: (options) => {
                    console.log('get options', options.length, options);
                },
            },
            colProps: {
                span: 8,
            },
            defaultValue: '0',
        },
        {
            field: 'field311',
            component: 'JAreaLinkage',
            label: '省市区选择',
            helpMessage: ['JAreaLinkage组件', '省市区选择'],
            required: true,
            slot: 'jAreaLinkage',
            colProps: {
                span: 8,
            },
            defaultValue: ["130000","130200"],
        },
        {
            field: 'field31',
            component: 'Input',
            label: '下拉本地搜索',
            helpMessage: ['ApiSelect组件', '远程数据源本地搜索', '只发起一次请求获取所有选项'],
            required: true,
            slot: 'localSearch',
            colProps: {
                span: 8,
            },
            defaultValue: '0',
        },
        {
            field: 'field32',
            component: 'Input',
            label: '下拉远程搜索',
            helpMessage: ['ApiSelect组件', '将关键词发送到接口进行远程搜索'],
            required: true,
            slot: 'remoteSearch',
            colProps: {
                span: 8,
            },
            defaultValue: '0',
        },
        {
            field: 'field33',
            component: 'ApiTreeSelect',
            label: '远程下拉树',
            helpMessage: ['ApiTreeSelect组件', '使用接口提供的数据生成选项'],
            required: true,
            componentProps: {
                api: treeOptionsListApi,
                resultField: 'list',
            },
            colProps: {
                span: 8,
            },
        },
      {
        field: 'field34',
        component: 'ApiRadioGroup',
        label: '远程Radio',
        helpMessage: ['ApiRadioGroup组件', '使用接口提供的数据生成选项'],
        required: true,
        componentProps: {
          api: optionsListApi,
          params: {
            count: 2,
          },
          resultField: 'list',
          // use name as label
          labelField: 'name',
          // use id as value
          valueField: 'id',
        },
        defaultValue: '1',
        colProps: {
          span: 8,
        },
      },
      {
        field: 'field35',
        component: 'ApiRadioGroup',
        label: '远程Radio',
        helpMessage: ['ApiRadioGroup组件', '使用接口提供的数据生成选项'],
        required: true,
        componentProps: {
          api: optionsListApi,
          params: {
            count: 2,
          },
          resultField: 'list',
          // use name as label
          labelField: 'name',
          // use id as value
          valueField: 'id',
          isBtn: true,
        },
        colProps: {
          span: 8,
        },
      },
        {
            field: 'divider-linked',
            component: 'Divider',
            label: '字段联动',
        },
        {
            field: 'province',
            component: 'Select',
            label: '省份',
            colProps: {
                span: 8,
            },
            componentProps: ({formModel, formActionType}) => {
                return {
                    options: provincesOptions,
                    placeholder: '省份与城市联动',
                    onChange: (e: any) => {
                        // console.log(e)
                        let citiesOptions =
                            e == 1
                                ? citiesOptionsData[provincesOptions[0].id]
                                : citiesOptionsData[provincesOptions[1].id];
                        // console.log(citiesOptions)
                        if (e === undefined) {
                            citiesOptions = [];
                        }
                        formModel.city = undefined; //  reset city value
                        const {updateSchema} = formActionType;
                        updateSchema({
                            field: 'city',
                            componentProps: {
                                options: citiesOptions,
                            },
                        });
                    },
                };
            },
        },
        {
            field: 'city',
            component: 'Select',
            label: '城市',
            colProps: {
                span: 8,
            },
            componentProps: {
                options: [], // defalut []
                placeholder: '省份与城市联动',
            },
        },
        {
            field: 'divider-selects',
            component: 'Divider',
            label: '互斥多选',
            helpMessage: ['两个Select共用数据源', '但不可选择对方已选中的项目'],
        },
        {
            field: 'selectA',
            component: 'Select',
            label: '互斥SelectA',
            slot: 'selectA',
            defaultValue: [],
            colProps: {
                span: 8,
            },
        },
        {
            field: 'selectB',
            component: 'Select',
            label: '互斥SelectB',
            slot: 'selectB',
            defaultValue: [],
            colProps: {
                span: 8,
            },
        },
        {
            field: 'divider-others',
            component: 'Divider',
            label: '其它',
        },
        {
            field: 'field20',
            component: 'InputNumber',
            label: '字段20',
            required: true,
            colProps: {
                span: 8,
            },
        },
        {
            field: 'field21',
            component: 'Slider',
            label: '字段21',
            componentProps: {
                min: 0,
                max: 100,
                range: true,
                marks: {
                    20: '20°C',
                    60: '60°C',
                },
            },
            colProps: {
                span: 8,
            },
        },
        {
            field: 'field22',
            component: 'Rate',
            label: '字段22',
            defaultValue: 3,
            colProps: {
                span: 8,
            },
            componentProps: {
                disabled: false,
                allowHalf: true,
            },
        },
    ];

    export default defineComponent({
        components: {BasicForm, CollapseContainer, PageWrapper, ApiSelect, JAreaLinkage, ASelect: Select},
        setup() {
            const check = ref(null);
            const {createMessage} = useMessage();
            const keyword = ref<string>('');
            const searchParams = computed<Recordable>(() => {
                return {keyword: unref(keyword)};
            });

            function onSearch(value: string) {
                keyword.value = value;
            }
            function areaChange(value) {
                alert(value);
            }

            return {
                schemas,
                optionsListApi,
                optionsA,
                optionsB,
                valueSelectA,
                valueSelectB,
                onSearch: useDebounceFn(onSearch, 300),
                searchParams,
                handleReset: () => {
                    keyword.value = '';
                },
                handleSubmit: (values: any) => {
                    createMessage.success('click search,values:' + JSON.stringify(values));
                },
                check,
            };
        },
    });
</script>
